<script setup name="home">
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { computed, onMounted, ref } from 'vue';

const router = useRouter();
const store = useStore();


store.dispatch('homehead/upHomeHead');


const homeHeadList = computed(() => store.state.homehead.homeHeadList);
const homeHeadValue = computed(() => JSON.parse(JSON.stringify(homeHeadList.value)));


function goToLogin() {
  router.push('/login');
};

function goToSearch(id) {
  router.push({
    path: `/category/${id}`,
  });
  store.dispatch('category/upCategory', id);
};

function goToHomepage() {
  router.push('/homepage');
}
// const clothes = ref(null);
// onMounted(() => {
// // 当clothes滚动到视野时，dispatch
//   const clearInterval = new IntersectionObserver(
//     (entries) => {
//       entries.forEach((entry) => {
//         if (entry.isIntersecting) {
//           store.dispatch('homegoods/upHomeGoods');
//         }
//       });
//     },
//     {
//       root: null,
//       rootMargin: '0px',
//       threshold: 0.1,
//     },
//   );
//   // 启动观察clothes.value是否进入视野
//   clearInterval.observe(clothes.value);
// });


</script>

<template>
  <div class="bog-box">
    <div class="nav">
      <div class="title">
        <div @click="goToLogin">退出登录 </div>
        <div>我的订单</div>
        <div>会员中心</div>
        <div>帮助中心</div>
        <div>关于我们</div>
        <div>手机版</div>
      </div>
    </div>
    <div class="samll-box">
      <div class="container">
        <img class="xiaotuxian" src="http://erabbit.itheima.net/img/logo.0940ebb5.png">
        <div @click="goToHomepage">首页</div>
        <div
          @click="goToSearch(item.id)"
          v-for="item in homeHeadValue.result"
          :key="item.id"
        >
          {{ item.name }}
        </div>
        <div class="mt-4">
          <el-input
            placeholder="搜一搜"
            class="input-with-select"
          >
            <template #prepend>
              <i-ep-search class="icon" :size="24"/>
            </template>
          </el-input>
        </div>
        <div class="shopping-car">
          <el-badge :value="12" class="shu">
            <i-ep-ShoppingTrolley :size="24"/>
          </el-badge>
        </div>
      </div>
    </div>
    <router-view />
  </div>

</template>

<style lang="scss" scoped>
.bog-box {
  width: 100vw;
  height: 100%;
  background: #f5f5f5;
  .nav {
    background: #333333;
    width: 100%;
    height: 53px;
    .title {
      height: 100%;
      width: 1240px;
      color: white;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: end;
      margin: 0 auto;

      div {
        display: inline-block;
        margin: 0 10px;
        border-right: 1px solid #666666;
        padding-right: 5px;
      }
    }
  }
  .samll-box {
    background: white;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .container {
    width: 1240px;
    height: 132px;
    display: flex;
    >div {
      height: 100%;
      flex-direction: row;
      justify-content: center;
      margin: 0 auto;
      display: flex;
      align-items: center;
      line-height:132px;
      cursor: pointer;
    }

    .xiaotuxian {
      // 调失帧
      object-fit: contain;
      width: 200px;
      height: 100%;
    }
    .shopping-car {
      line-height:132px;
      margin: 0;
      font-size: 26px;

    }
  }
}
</style>
